<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
html, body {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	position: fixed;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	-webkit-filter: contrast(120%);
	filter: contrast(120%);
	background-color: black;
}

.container {
	width: 100%;
	height: 100%;
	background-image: radial-gradient(1600px at 70% 120%, rgba(33, 39, 80, 1)
		10%, #020409 100%);
}

.content {
	width: inherit;
	height: inherit;
}

#universe {
	width: 100%;
	height: 100%;
}

#footerContent {
	font-family: sans-serif;
	font-size: 110%;
	color: rgba(200, 220, 255, .3);
	width: 100%;
	position: fixed;
	bottom: 0px;
	padding: 20px;
	text-align: center;
	z-index: 20;
}

#scene {
	height: 100%;
	position: absolute;
	left: 50%;
	margin-left: -800px;
}

a {
	text-decoration: none;
	color: rgba(200, 220, 255, 1);
	opacity: .4;
	transition: opacity .4s ease;
}

a:hover {
	opacity: 1;
}
</style>

<link rel="stylesheet"
	href="static/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/login.css">

</head>

<body>
	<!-- <form action="login" method="post"> -->
	<form action="selectArtByNameAndPassword" method="post">
		<div class="materialContainer">
			<div class="box">
				<div class="title">登录</div>
				<div class="input">
					<label for="name">用户名</label> <input type="text" name="username" id="name">
					<span class="spin"></span>
				</div>
				<div class="input">
					<label for="pass">密码</label> <input type="password" name="password" id="pass">
					<span class="spin"></span>
				</div>
				<div class="button login">
					<button>
						<span>登录</span> <i class="fa fa-check"></i>
					</button>
				</div>
				<a href="javascript:" class="pass-forgot">忘记密码？</a>
			</div>
	</form>
	<form action="addArt" method="post">
		<div class="overbox">
			<div class="material-button alt-2">
				<span class="shape"></span>
			</div>
			<div class="title">注册</div>
			<div class="input">
				<label for="regname">用户名</label> <input type="text" name="username"
					id="regname"> <span class="spin"></span>
			</div>
			<div class="input">
				<label for="regpass">密码</label> <input type="password"
					name="password" id="regpass"> <span class="spin"></span>
			</div>
			<div class="input">
				<label for="reregpass">确认密码</label> <input type="password"
					name="reregpass" id="reregpass"> <span class="spin"></span>
			</div>
			<div class="button">
				<button>
					<span>注册</span>
				</button>
			</div>	
		</div>
		</div>
	</form>
	<div class="container">
		<div class="content">

			<!--登录内容-->

			<canvas id="universe"></canvas>

		</div>
	</div>

	<script>
			window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
				window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

			var starDensity = .216;
			var speedCoeff = .05;
			var width;
			var height;
			var starCount;
			var circleRadius;
			var circleCenter;
			var first = true;
			var giantColor = '180,184,240';
			var starColor = '226,225,142';
			var cometColor = '226,225,224';
			var canva = document.getElementById('universe');
			var stars = [];

			windowResizeHandler();
			window.addEventListener('resize', windowResizeHandler, false);

			createUniverse();

			function createUniverse() {
				universe = canva.getContext('2d');

				for(var i = 0; i < starCount; i++) {
					stars[i] = new Star();
					stars[i].reset();
				}

				draw();
			}

			function draw() {
				universe.clearRect(0, 0, width, height);

				var starsLength = stars.length;

				for(var i = 0; i < starsLength; i++) {
					var star = stars[i];
					star.move();
					star.fadeIn();
					star.fadeOut();
					star.draw();
				}

				window.requestAnimationFrame(draw);
			}

			function Star() {

				this.reset = function() {
					this.giant = getProbability(3);
					this.comet = this.giant || first ? false : getProbability(10);
					this.x = getRandInterval(0, width - 10);
					this.y = getRandInterval(0, height);
					this.r = getRandInterval(1.1, 2.6);
					this.dx = getRandInterval(speedCoeff, 6 * speedCoeff) + (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120) + speedCoeff * 2;
					this.dy = -getRandInterval(speedCoeff, 6 * speedCoeff) - (this.comet + 1 - 1) * speedCoeff * getRandInterval(50, 120);
					this.fadingOut = null;
					this.fadingIn = true;
					this.opacity = 0;
					this.opacityTresh = getRandInterval(.2, 1 - (this.comet + 1 - 1) * .4);
					this.do = getRandInterval(0.0005, 0.002) + (this.comet + 1 - 1) * .001;
				};

				this.fadeIn = function() {
					if(this.fadingIn) {
						this.fadingIn = this.opacity > this.opacityTresh ? false : true;
						this.opacity += this.do;
					}
				};

				this.fadeOut = function() {
					if(this.fadingOut) {
						this.fadingOut = this.opacity < 0 ? false : true;
						this.opacity -= this.do / 2;
						if(this.x > width || this.y < 0) {
							this.fadingOut = false;
							this.reset();
						}
					}
				};

				this.draw = function() {
					universe.beginPath();

					if(this.giant) {
						universe.fillStyle = 'rgba(' + giantColor + ',' + this.opacity + ')';
						universe.arc(this.x, this.y, 2, 0, 2 * Math.PI, false);
					} else if(this.comet) {
						universe.fillStyle = 'rgba(' + cometColor + ',' + this.opacity + ')';
						universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);

						//comet tail
						for(var i = 0; i < 30; i++) {
							universe.fillStyle = 'rgba(' + cometColor + ',' + (this.opacity - (this.opacity / 20) * i) + ')';
							universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2, 2, 2);
							universe.fill();
						}
					} else {
						universe.fillStyle = 'rgba(' + starColor + ',' + this.opacity + ')';
						universe.rect(this.x, this.y, this.r, this.r);
					}

					universe.closePath();
					universe.fill();
				};

				this.move = function() {
					this.x += this.dx;
					this.y += this.dy;
					if(this.fadingOut === false) {
						this.reset();
					}
					if(this.x > width - (width / 4) || this.y < 0) {
						this.fadingOut = true;
					}
				};

				(function() {
					setTimeout(function() {
						first = false;
					}, 50)
				})()
			}

			function getProbability(percents) {
				return((Math.floor(Math.random() * 1000) + 1) < percents * 10);
			}

			function getRandInterval(min, max) {
				return(Math.random() * (max - min) + min);
			}

			function windowResizeHandler() {
				width = window.innerWidth;
				height = window.innerHeight;
				starCount = width * starDensity;
				circleRadius = (width > height ? height / 2 : width / 2);
				circleCenter = {
					x: width / 2,
					y: height / 2
				}

				canva.setAttribute('width', width);
				canva.setAttribute('height', height);
			}
		</script>

</body>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/index.js"></script>
</html>